<template>
  <div class="recharge">
    <h4>营收统计</h4>
    <!-- <el-row> -->
    <el-carousel trigger="click" height="35.5vh" :autoplay="false" indicator-position="outside" arrow="never">
      <el-carousel-item v-for="(item,index) in incomeData" :key="index">
        <div class="grid_title">
          <div class="grid-time">
            <div class="title_right" style="padding:2px 0">
              商户:{{item.merchantName}}
            </div>
            <h1>￥{{item.expenditureSum | amountyuan}}</h1>
            <div class="title_right">
              <div>
                当日消费次数:
                <span>{{item.consumeCountSum}}</span>
              </div>
              <div>
                平均消费:
                <span>{{item.avgExpenditure | amountyuan}}元/人次</span>
              </div>
            </div>
          </div>
        </div>
        <el-row :gutter="8">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div class="grud_title">早餐</div>
              <div class="grud_title title_size">{{item.morningTime}}</div>
              <div class="grud_data">￥{{item.expenditureMorning | amountyuan}}</div>
              <div class="grud_data data_size">{{item.consumeCountMorning}}次</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div class="grud_title">中餐</div>
              <div class="grud_title title_size">{{item.lunchTime}}</div>
              <div class="grud_data">￥{{item.expenditureLunch | amountyuan}}</div>
              <div class="grud_data data_size">{{item.consumeCountLunch}}次</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div class="grud_title">晚餐</div>
              <div class="grud_title title_size">{{item.dinnerTime}}</div>
              <div class="grud_data">￥{{item.expenditureDinner | amountyuan}}</div>
              <div class="grud_data data_size">{{item.consumeCountDinner}}次</div>
            </div>
          </el-col>
           <el-col :span="12">
            <div class="grid-content bg-purple">
              <div class="grud_title">夜宵</div>
              <div class="grud_title title_size">{{item.nightTime}}</div>
              <div class="grud_data">￥{{item.expenditureNight | amountyuan}}</div>
              <div class="grud_data data_size">{{item.consumeCountNight}}次</div>
            </div>
          </el-col>
           <!-- <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="grud_title">其他时间</div>
              <div class="grud_title title_size">{{item.otherTime}}</div>
              <div class="grud_data">￥{{item.expenditureOther | amountyuan}}</div>
              <div class="grud_data data_size">{{item.consumeCountOther}}次</div>
            </div>
          </el-col> -->
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 营收统计数据
      incomeData: [],
    };
  },
  created() {
    this.getRecharge();
  },
  computed: {
    // 当前单位id
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid;
      },
    },
  },
  methods: {
    // 获取充值信息
    getRecharge() {
      this.$http({
        url: this.$http.adornUrl("/info/consume/statistics"),
        method: "post",
        data: this.$http.adornData({
          messageContent: { unitGuid: this.changeschoolid },
        }),
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          if (data.messageContent.length != 0) {
            this.incomeData = data.messageContent;
          }
        } else {
          this.$message.error(data.errorMessage);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.recharge {
  overflow: hidden;
  .grid_title {
    padding: 1vh;
    padding-bottom: 0.1vh;
    overflow: hidden;
  }
  .title_size {
    font-size: 12px;
    font-weight: 600;
  }
  .grud_data.data_size {
    font-size: 13px;
    font-weight: 500;
  }
  h1 {
    margin: 0;
    font-size:2vh;
  }
  h4 {
    margin: 0;
    padding-top: 0.8vh;
    padding-left: 0.8vw;
  }
  .grid-time {
  
    box-shadow: 0 0 8px #ddd;
    // background-color:#f5f5f5;
    height: 9vh;
    padding-left: 1vw;
    border-radius: 4px;
    .title_right {
      display: flex;
      div {
        flex: 1;
      }
      font-size: 12px;
    }
    span {
      // color: #ccc;
      font-size: 12px;
      margin-left: 1vw;
    }
  }
}
.el-row {
  padding:0 1vh;
  // padding-top: 0;
  font-weight: 1000;
  &:first-child {
    margin-top: 0;
  }
}
.el-col {
  border-radius: 4px;
  margin-top: 0.5vh;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  display: flex;
  box-shadow: 0 0 4px #ddd;
  //   background-color:#f5f5f5;
  height: 12vh;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .grud_data {
    font-size: 1.8vh;
  }
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>